<template>
    <div>
        <div class="optionstab" @click="onNewpage">
            
            <p><slot></slot><span>{{optionName}}</span></p>
            <p><span class="preview">{{previewContent}}</span><van-icon name="arrow" /></p>
            
        </div>
    </div>
</template>
<script>
export default {
    props: {
        optionName: { type: String, default: () => '选项名称' },
        previewContent: { type: String, default: () => '' },
    },
    data() {
        return {

        }
    },
    methods: {
        onNewpage() {
            this.$emit('onclick',this.optionName)
        }
    }
}
</script>

<style lang="less" scoped>
.optionstab {
    padding: 15px 15px;
    display: flex;
    justify-content: space-between;
    background: rgb(255, 255, 255);
    // border-top: 1px solid rgb(200, 200, 200);
    margin: 5px 0;
    p{
        display: flex;
        justify-content: center;
        align-items: center;
        gap:3px;
        .preview{
            display: inline-block;
            color: rgb(174, 174, 174);
            padding-right: 10px;
            text-align: center;
        }
    }
}
</style>